<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-20 13:46:01
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:39:14
-->

<template>
  <div>
    <!-- 管理人员选择 -->
    <el-dialog
      title="人员选择"
      :visible.sync="dialog.distributionShow"
      @close="userClose"
      width="30%"
    >
      <div class="TreeChioosse">
        <div class="TreeChioosse-tree">
          <div class="company" style="overflow: auto">
            <el-tree
              :data="data"
              accordion
              :props="defaultProps"
              @node-click="handleNodeClick"
              highlight-current
            >
              <template slot-scope="{ node, data }">
                <el-tooltip
                  effect="dark"
                  :content="node.label"
                  placement="top-start"
                >
                  <div class="tool">
                    <span class="comName">
                      {{ node.label }}
                    </span>
                  </div>
                </el-tooltip>
              </template>
            </el-tree>
          </div>
        </div>
        <div class="TreeChioosse-table">
          <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
            ref="multipleTable"
            @select="selectChange"
            @row-click="handleRowClick"
            @select-all="selectAll"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="姓名" prop="nickName"> </el-table-column>
          </el-table>

        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.distributionShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTreeList, treeselect } from "@/api/index";
import { distribution } from "@/api/order";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    chargeId: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
        pageNum: 1,
      pageSize: 10,
      total: 0,
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [],
      data: [],
      handleSelectionList: [],
    };
  },
  created() {
    this.treeselect();
    this.getdeptData();
  },
  methods: {
    // 分配
    onSubmit() {
      distribution({
        id: this.chargeId,
        userId: this.handleSelectionList[0].userId,
      }).then((res) => {
        this.$message.success(res.msg);
        this.dialog.distributionShow = false;
        this.$parent.getList();
      });
    },
    userClose() {
      this.dialog.distributionShowEject = false;
    },
    handleSelectionChange(value) {
      this.handleSelectionList = value;
    },

    selectChange(selection, row) {
      if (selection.length > 1) {
        const del_row = selection.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
    },
    // 点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
      this.selectChange(this.handleSelectionList);
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1;
      }
    },
    // 获取负责人
    treeselect() {
      treeselect().then((res) => {
        this.data = res.data;
        this.getdeptData(res.data[0].userId);
      });
    },
 // 获取部门人
    getdeptData(deptId) {
      getTreeList({
        status: "",
        deptId: deptId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 树节点选择
    handleNodeClick(data) {
      this.getdeptData(data.id);
    },
    // 树节点筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="less" scoped>
.TreeChioosse {
  display: flex;
  justify-content: space-around;
  .TreeChioosse-tree {
    overflow: auto;
    height: 600px;
    width: 30%;
  }
  .TreeChioosse-table {
    width: 65%;
    .el-table {
      margin-top: 0;
      border-bottom: none !important;
    }
    .el-table::before {
      display: none;
    }
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
   